
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Shop Homepage Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- Add custom CSS here -->
    <link href="css/shop-homepage.css" rel="stylesheet">
    <!-- JavaScript -->
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/bootstrap.js"></script>
     <script src="js/registration.js"></script>
     <script src="js/product.js"></script>
    <!--
    <script src="js/jquery.validate.js"></script>
-->
</head>

<body>

    <!-- this div is for banner and nav bar -->
        
    <div id="pageHeader"> </div>
    
                                                                                                             
    <div class="container">
        
         <div class="row">

                    <div class="col-sm-12">
                          <h1 class="page-header">Online Basket
                         <small>Please Sign Up. It's free and always will be.
                         </small>
                        </h1>
                    </div>

        </div>
        
               
        <div class="well col-md-6 col-md-offset-3">
        <form method="get" class="form-horizontal"  id="signupform" action="registration">                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
         
           
            <div class="row">
           
                <div class="form-group">
                    <label class="control-label col-sm-4" for="name">Username:</label> 
                    <div class="col-sm-7">
                        <input type="text" id="name" class="form-control" placeholder="E.g. xiaowang" tabindex="1" name="name" required>
                    </div>

                </div>
            </div>
            
            <div class="row">
           
                <div class="form-group">
                    <label class="control-label col-sm-4" for="email">Email:</label> 
                    <div class="col-sm-7">
                        <input type="email" id="email" class="form-control" placeholder="E.g. xiaow@gmail.com" tabindex="2" name="email" required>
                    </div>

                </div>
            </div>
            
            <div class="row">
           
                <div class="form-group">
                    <label class="control-label col-sm-4" for="address">Address:</label> 
                    <div class="col-sm-7">
                        <input type="text" id="address" class="form-control" placeholder="Enter your address" tabindex="3" name="address" required>
                    </div>

                </div>
            </div>
            
            
              <div class="row">
           
                <div class="form-group">
                    <label class="control-label col-sm-4" for="tel">Contact No.:</label> 
                    <div class="col-sm-7">
                        <input type="text" id="tel" class="form-control" placeholder="Enter your phone number" tabindex="5" name="tel" required>
                    </div>

                </div>
            </div>
            
            <div class="row">
           
                <div class="form-group">
                    <label class="control-label col-sm-4" for="password">Password:</label> 
                    <div class="col-sm-7">
                      <input type="password" id="password" class="form-control"  pattern=".{6,}"  required title="please type at least 6 characters"
                               placeholder="Min. 6 Characters" tabindex="5" name="password" required/>
                    </div>

                </div>
            </div>
            
            
            <div class="row">
           
                <div class="form-group">
                    <label class="control-label col-sm-4" for="confirm_password">Confirm-Password:</label> 
                    <div class="col-sm-7">
                        <input type="password" id="confirm_password"  pattern=".{6,}" class="form-control" placeholder="Confirm Password" tabindex="6" name="confirm_password" required>
                    </div>

                </div>
            </div>
            <div class="row">
              <div class="form-group">
                  <div class="col-sm-7 col-sm-offset-4">
                        <input id="condition" type="checkbox" tabindex="7" required>
                        <label for="condition" class="control-label">I agree all your <a href="#">Terms of Services</a></label> 
                   </div> 
              </div>

           </div>
           <div class="row col-md-6 col-md-offset-4">
            <button class="btn btn-success" id="singup" tabindex="8" onclick="singUp()">Sign Up</button>
            <button class="btn btn-success" id="clear" tabindex="8" type="reset">Clear</button>
           </div>
        </form>
        
    </div>
        
        
    </div>
        
       
    <!-- /.container -->
        <div class="container" id="footer">
            
        </div>
    <!-- /.container -->

   
</body>

</html>